<%@ page import="java.util.Map" %>
<%@ page import="java.util.HashMap" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    Map<String, String> editTypes = new HashMap<String, String>() {{
        put("数字", "number");
        put("字符串", "text");
        put("选择框", "select");
        put("日期", "date");
    }};
    request.setAttribute("editTypes", editTypes);
    Map<String, String> dateTypes = new HashMap<String, String>() {{
        put("年选择器", "year");
        put("年月选择器", "month");
        put("日期选择器", "date");
        put("时间选择器", "time");
        put("日期时间选择器", "datetime");
    }};
    request.setAttribute("dateTypes", dateTypes);
%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>字段</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="_csrf" content="${_csrf.token}"/>
    <meta name="_csrf_header" content="${_csrf.headerName}"/>
    <link rel="icon" type="image/x-icon" href="${pageContext.request.contextPath}/favicon.ico">
    <link rel="stylesheet" href="${pageContext.request.contextPath }/back/lib/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="${pageContext.request.contextPath }/back/css/font.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath }/back/css/xadmin.css">
    <style>
        .x-red {
            position: absolute;
            left: 6px;
            top: 2px;
            margin-right: 2px;
            color: red;
            float: left;
            z-index: 1;
        }

        .xm-select-parent .xm-form-select dd {
            margin-left: 15px;
        }

        .my-notes {
            position: relative;
        }

        .my-notes .content {
            padding-left: 100px;
            height: 24px;
            border: 1px solid #FFF;
            border-top: 0;
        }

        .my-notes .my-notes-show {
            width: 100%;
            z-index: 9990;
            position: absolute;
            top: 0;
            background: #FFF;
        }

        .my-notes .my-notes-show > div {
            padding-left: 100px;
            border: 1px solid #e6e6e6;
            border-top: 0;
        }

        .ace_editor .ace_line span, .ace_editor .ace_line {
            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
        }
    </style>
</head>

<body>
<div class="x-body">
    <form class="layui-form layui-form-pane" lay-filter="form-sms" onsubmit="return false;">
        <input type="hidden" name="tableId" value="${tableId}">
        <input type="hidden" name="id" value="${CCols.id}">
        <input type="hidden" name="colsId" value="${CCols.colsId}">
        <div class="layui-row layui-col-space15 layui-form-item">
            <div class="layui-col-sm4">
                <label for="T_field" class="layui-form-label">字段</label>
                <div class="layui-input-block">
                    <input type="text" class="layui-input" id="T_field" name="field"
                           placeholder="字段" autocomplete="off" value="${CCols.field}">
                </div>
                <div class="my-notes">
                    <div class="layui-elip layui-text content">
                        查询语句的原始字段 或者 其他 <br>
                        注：错误的字段信息将影响查询
                    </div>
                </div>
            </div>
            <div class="layui-col-sm4">
                <label for="T_title" class="layui-form-label">标题</label>
                <div class="layui-input-block">
                    <input type="text" class="layui-input" id="T_title" name="title"
                           placeholder="标题" autocomplete="off" value="${CCols.title}">
                </div>
                <div class="my-notes">
                    <div class="layui-elip layui-text content">
                        表头名
                    </div>
                </div>
            </div>
            <div class="layui-col-sm4">
                <label for="T_dataField" class="layui-form-label"><span class="x-red">*</span>数据列</label>
                <div class="layui-input-block">
                    <%--${CCols.dataField=='false'}--%>
                    <select name="dataField" id="T_dataField" lay-verify="required">
                        <c:if test="${CCols.dataField=='false'||CCols.dataField==null}">
                            <option value="false" selected>否</option>
                            <option value="true">是</option>
                        </c:if>
                        <c:if test="${CCols.dataField=='true'}">
                            <option value="false">否</option>
                            <option value="true" selected>是</option>
                        </c:if>
                    </select>
                </div>
                <div class="my-notes">
                    <div class="layui-elip layui-text content">
                        否：只用于展示（选择框/操作列。。）<br>是：会用于数据库查询
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-row layui-col-space15 layui-form-item">
            <div class="layui-col-sm6">
                <label for="T_width" class="layui-form-label">列宽</label>
                <div class="layui-input-block">
                    <input type="text" id="T_width" name="width" autocomplete="off" class="layui-input"
                           placeholder="自动分配" value="${CCols.width}">
                </div>
                <div class="my-notes">
                    <div class="layui-elip layui-text content">
                        支持 数字/百分比
                    </div>
                </div>
            </div>
            <div class="layui-col-sm6">
                <label for="B_minWidth" class="layui-form-label">列最小宽度</label>
                <div class="layui-input-block">
                    <input type="number" id="B_minWidth" name="minWidth" autocomplete="off" class="layui-input"
                           placeholder="" value="${CCols.minWidth}">
                </div>
                <div class="my-notes">
                    <div class="layui-elip layui-text content">
                        一般用于列宽自动分配的情况。其优先级高于基础参数中的 cellMinWidth
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-row layui-col-space15 layui-form-item">
            <div class="layui-col-sm6">
                <label for="T_type" class="layui-form-label">列类型</label>
                <div class="layui-input-block">
                    <input type="text" id="T_type" name="type" autocomplete="off" class="layui-input"
                           placeholder="normal" value="${CCols.type}">
                </div>
                <div class="my-notes">
                    <div class="layui-elip layui-text content">
                        normal：常规列，无需设定<br>
                        checkbox：复选框列<br>
                        radio：单选框列<br>
                        numbers：序号列<br>
                        space：空列
                    </div>
                </div>
            </div>
            <div class="layui-col-sm6">
                <label for="B_fieldType" class="layui-form-label">字段类型</label>
                <div class="layui-input-block">
                    <input type="text" id="B_fieldType" name="fieldType" autocomplete="off"
                           class="layui-input" placeholder=''
                           value='${CCols.fieldType}'>
                </div>
                <div class="my-notes">
                    <div class="layui-elip layui-text content">
                        系统字段类型（用于查询等）
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-row layui-col-space15 layui-form-item">
            <div class="layui-col-sm4">
                <label for="T_fixed" class="layui-form-label">固定列</label>
                <div class="layui-input-block">
                    <select name="fixed" id="T_fixed" lay-verify="">
                        <c:if test="${CCols.fixed==''||CCols.fixed==null}">
                            <option value="" selected>否</option>
                            <option value="left">靠左</option>
                            <option value="right">靠右</option>
                        </c:if>
                        <c:if test="${CCols.fixed=='left'}">
                            <option value="">否</option>
                            <option value="left">靠左</option>
                            <option value="right" selected>靠右</option>
                        </c:if>
                        <c:if test="${CCols.fixed=='right'}">
                            <option value="">否</option>
                            <option value="left">靠左</option>
                            <option value="right" selected>靠右</option>
                        </c:if>
                    </select>
                </div>
            </div>
            <div class="layui-col-sm4">
                <label for="B_hide" class="layui-form-label">隐藏</label>
                <div class="layui-input-block">
                    <select name="hide" id="B_hide" lay-verify="">
                        <c:if test="${CCols.hide=='false'||CCols.hide==null}">
                            <option value="false" selected>否</option>
                            <option value="true">是</option>
                        </c:if>
                        <c:if test="${CCols.hide=='true'}">
                            <option value="false">否</option>
                            <option value="true" selected>是</option>
                        </c:if>
                    </select>
                </div>
                <div class="my-notes">
                    <div class="layui-elip layui-text content">
                        初始状态是否隐藏
                    </div>
                </div>
            </div>
            <div class="layui-col-sm4">
                <label for="B_totalRow" class="layui-form-label">列合计</label>
                <div class="layui-input-block">
                    <select name="totalRow" id="B_totalRow" lay-verify="">
                        <c:if test="${CCols.totalRow=='false'||CCols.totalRow==null}">
                            <option value="false" selected>否</option>
                            <option value="true">是</option>
                        </c:if>
                        <c:if test="${CCols.totalRow=='true'}">
                            <option value="false">否</option>
                            <option value="true" selected>是</option>
                        </c:if>
                    </select>
                </div>
                <div class="my-notes">
                    <div class="layui-elip layui-text content">
                        是否开启该列的自动合计，需要表格中totalRow（合计行）字段为true
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-row layui-col-space15 layui-form-item">
            <div class="layui-col-sm4">
                <label for="T_disSort" class="layui-form-label">允许排序</label>
                <div class="layui-input-block">
                    <select name="disSort" id="T_disSort" lay-verify="">
                        <c:if test="${CCols.disSort=='false'||CCols.disSort==null}">
                            <option value="false" selected>否</option>
                            <option value="true">是</option>
                        </c:if>
                        <c:if test="${CCols.disSort=='true'}">
                            <option value="false">否</option>
                            <option value="true" selected>是</option>
                        </c:if>
                    </select>
                </div>
            </div>
            <div class="layui-col-sm4">
                <label for="B_sort" class="layui-form-label"><span class="x-red">*</span>排序序号</label>
                <div class="layui-input-block">
                    <input type="number" id="B_sort" name="sort" autocomplete="off" class="layui-input"
                           lay-verify="required|number" placeholder="0" value="${CCols.sort}">
                </div>
            </div>

            <div class="layui-col-sm4">
                <label for="B_toolbar" class="layui-form-label">列工具条</label>
                <div class="layui-input-block">
                    <input type="text" id="B_toolbar" name="toolbar" autocomplete="off" class="layui-input"
                           placeholder="0" value="${CCols.toolbar}">
                </div>
                <div class="my-notes">
                    <div class="layui-elip layui-text content">
                        必须为页面中存在的工具栏的 id
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-row layui-col-space15 layui-form-item">
            <div class="layui-col-sm3">
                <label for="T_unresize" class="layui-form-label">禁用拖拽</label>
                <div class="layui-input-block">
                    <select name="unresize" id="T_unresize" lay-verify="">
                        <c:if test="${CCols.unresize=='false'||CCols.unresize==null}">
                            <option value="false" selected>否</option>
                            <option value="true">是</option>
                        </c:if>
                        <c:if test="${CCols.unresize=='true'}">
                            <option value="false">否</option>
                            <option value="true" selected>是</option>
                        </c:if>
                    </select>
                </div>
            </div>
            <div class="layui-col-sm3">
                <label for="B_align" class="layui-form-label">文字排列</label>
                <div class="layui-input-block">
                    <select name="align" id="B_align" lay-verify="">
                        <c:if test="${CCols.align=='left'||CCols.align==null||CCols.align==''}">
                            <option value="left" selected>默认/左对齐</option>
                            <option value="center">剧中</option>
                            <option value="right">右对齐</option>
                        </c:if>
                        <c:if test="${CCols.align=='center'}">
                            <option value="left">默认/左对齐</option>
                            <option value="center" selected>剧中</option>
                            <option value="right">右对齐</option>
                        </c:if>
                        <c:if test="${CCols.align=='right'}">
                            <option value="left">默认/左对齐</option>
                            <option value="center">剧中</option>
                            <option value="right" selected>右对齐</option>
                        </c:if>
                    </select>
                </div>
            </div>
            <div class="layui-col-sm6">
                <label for="B_style" class="layui-form-label">自定义样式</label>
                <div class="layui-input-block">
                    <input type="text" id="B_style" name="style" autocomplete="off" class="layui-input"
                           placeholder="0" value="${CCols.style}">
                </div>
            </div>
        </div>

        <div class="layui-row layui-col-space15 layui-form-item">
            <div class="layui-col-sm6">
                <label for="T_clospan" class="layui-form-label">所占列数</label>
                <div class="layui-input-block">
                    <input type="number" id="T_clospan" name="clospan" autocomplete="off" class="layui-input"
                           placeholder="1" value="${CCols.clospan}">
                </div>
                <div class="my-notes">
                    <div class="layui-elip layui-text content">
                        单元格所占列数（默认：1）。一般用于多级表头
                    </div>
                </div>
            </div>
            <div class="layui-col-sm6">
                <label for="B_rowspan" class="layui-form-label">所占行数</label>
                <div class="layui-input-block">
                    <input type="number" id="B_rowspan" name="rowspan" autocomplete="off"
                           class="layui-input" placeholder='1' value='${CCols.rowspan}'>
                </div>
                <div class="my-notes">
                    <div class="layui-elip layui-text content">
                        单元格所占行数（默认：1）。一般用于多级表头
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-row layui-col-space15 layui-form-item">
            <div class="layui-col-sm4">
                <label for="T_canScreen" class="layui-form-label">是否用于搜索</label>
                <div class="layui-input-block">
                    <select name="canScreen" id="T_canScreen" lay-filter="can-screen" lay-verify="">
                        <c:if test="${CCols.canScreen=='false'||CCols.canScreen==null||CCols.canScreen==''}">
                            <option value="false" selected>否</option>
                            <option value="true">是</option>
                        </c:if>
                        <c:if test="${CCols.canScreen=='true'}">
                            <option value="false">否</option>
                            <option value="true" selected>是</option>
                        </c:if>
                    </select>
                </div>
                <div class="my-notes">
                    <div class="layui-elip layui-text content">
                        设置是否能做为搜索字段，必须为数据列
                    </div>
                </div>
            </div>
            <div class="layui-col-sm4" id="editType-container" style="display: none">
                <label for="T_editType" class="layui-form-label">搜索类型</label>
                <div class="layui-input-block">
                    <select name="editType" id="T_editType" lay-filter="edit-type" lay-verify="">
                        <c:forEach var="editType" items="${editTypes}">
                            <c:if test="${editType.value == CCols.editType}">
                                <option value="${editType.value}" selected>${editType.key}</option>
                            </c:if>
                            <c:if test="${editType.value != CCols.editType}">
                                <option value="${editType.value}">${editType.key}</option>
                            </c:if>
                        </c:forEach>
                    </select>
                </div>
            </div>
            <div class="layui-col-sm4" id="dateType-container" style="display: none">
                <label for="T_dateType" class="layui-form-label">日期类型</label>
                <div class="layui-input-block">
                    <select name="dateType" id="T_dateType" lay-verify="">
                        <c:forEach var="dateType" items="${dateTypes}">
                            <c:if test="${dateType.value == CCols.dateType}">
                                <option value="${dateType.value}" selected>${dateType.key}</option>
                            </c:if>
                            <c:if test="${dateType.value != CCols.dateType}">
                                <option value="${dateType.value}">${dateType.key}</option>
                            </c:if>
                        </c:forEach>
                    </select>
                </div>
            </div>
        </div>

        <div class="layui-form-item layui-form-text" id="dataSource-container" style="display: none">
            <label for="T_dataSource" class="layui-form-label">选择框数据源
                <small>&nbsp; （sql 或者 json数组）</small>
            </label>
            <div class="layui-input-block">
                <pre style="height: 100px;width: 100%" id="T_dataSource">${CCols.dataSource}</pre>
            </div>
        </div>

        <div class="layui-form-item layui-form-text">
            <label for="T_templet" class="layui-form-label">自定义列模板
                <small>&nbsp; function(d) d：当前行数据</small>
            </label>
            <div class="layui-input-block">
                <pre style="height: 100px;width: 100%" id="T_templet">${CCols.templet}</pre>
            </div>
        </div>

        <div class="layui-form-item">
            <button class="layui-btn" style="float: right" id="my-submit" lay-filter="submit" lay-submit>保存信息</button>
        </div>
    </form>

</div>

<script type="text/javascript" src="${pageContext.request.contextPath }/back/lib/layui/layui.js"
        charset="utf-8"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/back/js/xadmin.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/httptTools.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/back/lib/ace_editor/ace.js?v=1"></script>
<script type="text/javascript"
        src="${pageContext.request.contextPath }/back/lib/ace_editor/ext-language_tools.js"></script>
<%--<script type="text/javascript" src="${pageContext.request.contextPath }/back/lib/ace_editor/theme-monokai.js"></script>--%>

<jsp:include page="/WEB-INF/page/layui_version.jsp"></jsp:include>

<script>

    // trigger extension
    ace.require("ace/ext/language_tools");
    var editor_templet = ace.edit("T_templet");
    editor_templet.session.setMode("ace/mode/javascript");
    editor_templet.setTheme("ace/theme/katzenmilch");
    // clouds  crimson_editor idle_fingers  katzenmilch
    editor_templet.setOptions({
        enableBasicAutocompletion: true,
        enableSnippets: true,
        enableLiveAutocompletion: true
    });


    var dataSource_templet = ace.edit("T_dataSource");
    dataSource_templet.session.setMode("ace/mode/javascript,ace/mode/sql");
    dataSource_templet.setTheme("ace/theme/katzenmilch");
    // clouds  crimson_editor idle_fingers  katzenmilch
    dataSource_templet.setOptions({
        enableBasicAutocompletion: true,
        enableSnippets: true,
        enableLiveAutocompletion: true
    });

    // editor_rawdml.getValue();
    $('body').on('mouseover', '.my-notes .content', function (event) {
        $('.my-notes .my-notes-show').each(function (i, e) {
            $(this).remove();
        });
        $(this).closest('.my-notes').append($('<div class="my-notes-show"></div>').append($('<div class="layui-text"><div>').html($(this).html())));
        //鼠标悬浮
    });
    $('body').on('mouseout', '.my-notes-show', function (event) {
        //鼠标离开
        $(this).remove();
    });
    layui.use(['form', 'layer', 'lutil'], function () {
        var form = layui.form,
            lutil = layui.lutil,
            layer = layui.layer;
        form.on('submit(submit)', function (formData) {
            var templet = editor_templet.getValue(), dataSource = dataSource_templet.getValue();
            var loding = layer.load(2, {shade: [0.3, '#eee']});
            ajaxRequestByCsrf('${pageContext.request.contextPath }/back/page_config/cols_save.do', $.extend({
                templet: templet, dataSource: dataSource
            }, formData.field), function (res) {
                lutil.success_msg(res.message);
                var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                parent.layer.close(index);
            }, null, function (res) {
                layer.close(loding);
            });
            return false;
        });

        if ($('#T_canScreen').val() == 'true') $('#editType-container').show();
        if ($('#T_editType').val() == 'date') $('#dateType-container').show();
        if ($('#T_editType').val() == 'select') $('#dataSource-container').show();

        form.on('select(can-screen)', function (data) {
            if (data.value == 'true') $('#editType-container').show();
            else $('#editType-container').hide(), $('#dateType-container').hide(), $('#dataSource-container').hide();
        });
        form.on('select(edit-type)', function (data) {
            if (data.value == 'date') $('#dateType-container').show();
            else $('#dateType-container').hide();
            if (data.value == 'select') $('#dataSource-container').show();
            else $('#dataSource-container').hide();
        });

    })
</script>
</body>
</html>
